import React from "react";

export default class Refs extends React.Component{
    //string类型的refs存在效率问题 未来将消失 不建议使用
    //<input ref="input1" type="text" placeholder="点击提示数据"/>

    //回调函数的refs
    // <input ref={(cuttentNode)=>{this.input1=cuttentNode}} type="text" placeholder="点击提示数据"/>

    //createRef api 调用
    /**
     * React.createRef 调用后返回一个容器，这个容器可以是识别被ref标识的节点，该容器是专人专用的 不能复用
     */
    render(){
        return (
            <div>
                <input ref={(cuttentNode)=>{this.input1=cuttentNode}} type="text" placeholder="点击提示数据"/>
                <button onClick={this.showData}>点击触发</button>
                <input  ref={this.myRef} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
            </div>
        )
    }
    myRef=React.createRef();
    showData = () =>{
         const {input1}=this;
         alert(input1.value);
       
    }
    showData2 = () =>{
        alert(this.myRef.current.value)
    }
}